import { Checkbox, Row, Col, Divider, message, Select, Form, InputNumber } from "antd";
import { useReactive } from "ahooks";
import { useEffect } from "react";
import { useModel } from "umi";
import { UpdateInnerRole, FindOneRole, CreateOrgRole } from "../../_graphql/approles";
import { Button } from "@douyinfe/semi-ui";

const layout = { labelCol: { span: 6 }, wrapperCol: { span: 16 } };
const tailLayout = { wrapperCol: { offset: 6, span: 16 } };

const SetRoleMembers = ({ application, roleKey, role, reloadData }) => {
    const { graphqlFetch } = useModel("global");
    const { onCloseGlobalModal } = useModel("global.modal");
    const form = Form.useForm();

    const state = useReactive({
        loading: false,
        newLevel: role.level || 1,
    });

    const saveLevel = async () => {
        let neworgRole;
        let res = await graphqlFetch({
            query: FindOneRole,
            variables: {
                aiUuid: application.aiUuid,
                arName: roleKey,
            },
        });
        if (res.a?.arName) {
            res = await graphqlFetch({
                query: UpdateInnerRole,
                variables: {
                    aiUuid: application.aiUuid,
                    arName: roleKey,
                    arLeve: state.newLevel,
                },
            });
        } else {
            neworgRole = {
                aiUuid: application.aiUuid,
                arName: roleKey,
                arLeve: state.newLevel,
                arCrti: new Date().getUTCTime(),
                arUpti: new Date().getUTCTime(),
                arRemk: role.text,
                arType: role.type,
            };
            res = await graphqlFetch({
                query: CreateOrgRole,
                variables: neworgRole,
            });
        }

        if (res) {
            message.success("层级修改成功！");
            reloadData(state.newLevel, neworgRole);
            onCloseGlobalModal();
        }
    };

    return (
        <div style={{ padding: "0 30px" }}>
            <div style={{ marginBottom: 16 }}>
                自定义层级：
                <InputNumber min={1} max={10} defaultValue={role.level} onChange={(value) => (state.newLevel = value)} />
            </div>
            <div style={{ textAlign: "center" }}>
                <Button theme="solid" onClick={saveLevel}>
                    保存层级
                </Button>
            </div>
        </div>
    );
};

export default SetRoleMembers;
